import React, { useState,useEffect,useRef } from "react";
import * as S from "../Home/styles";
import { Text, View,TextInput, StyleSheet,PanResponder, TouchableOpacity, Alert,Platform,LayoutAnimation,Animated,BackHandler } from "react-native";
import { Modal,Button,Avatar, HStack,Image, Center, NativeBaseProvider ,ChevronRightIcon,useToast,ArrowBackIcon,AddIcon,HamburgerIcon,ThreeDotsIcon, Actionsheet,useDisclose,Box,AlertDialog} from "native-base";
import {getEventList,eventSort,classifyAdd,classifyDel,classifEdit} from "../../services/index";
import Icon from 'react-native-vector-icons/Ionicons';
import DraggableFlatList, {
  ScaleDecorator,
  ShadowDecorator,
  OpacityDecorator,
} from "react-native-draggable-flatlist";
import { ImageMap } from "../../constants/categories";
import { useCategory } from "../../hooks/useCategory";
import Toast from "react-native-toast-notifications";
import { showToast } from "../../utils/toast";



const Title = ({navigation,addBtn}:any)=>{
  return(
    <View style={styles.titleBox}>
      <TouchableOpacity
        style={styles.backBtn}
        onPress={() => {
          navigation.goBack()
        }}
      >
        <ArrowBackIcon size="5" />
      </TouchableOpacity>
      <Text style={styles.titlText}>分类管理</Text>
      <TouchableOpacity
        style={[styles.backBtnRight]}
        onPress={() => {
          // navigation.goBack()
          addBtn(1)
        }}
      >
        <AddIcon size="5" />
      </TouchableOpacity>
    </View>
  )
}










 const Classify = ({navigation}:any) => {
  const {
    loadCategory,
    updateSelectedStatus,
    loadCommonCategory
  } = useCategory();
  
  const flatListRef = useRef(null);
  const [categoryList, setCategoryList] = useState([]);

  const [selectLevel ,setSelectLevel] = useState(0)
  const [selectItem ,setSelectItem] = useState({})

  const [modalVisible, setModalVisible] = useState(false);
  const [modalType, setModalType] = useState(1);
  const [alertOpen, setAlertOpen] = useState(false);
  
  const [delType,setDelType] = useState(1)

  const delClassIfy = (type)=>{
    if(type == 1 || type == 3){
      if(type == 1){
        setDelType(1)
      }else{
        setDelType(0)
      }
      setAlertOpen(true)
      onClose()
    }else{
      let obj = {
        id:selectItem.id,
        level:selectLevel,
        archive:delType
      }
      console.log(obj)
      // console.log(selectLevel)
      // return
      classifyDel(obj).then(res=>{
        loadClassify()
      })

    }

    
  }
  


  const subMitFrom = (name,toast,modalToastRef)=>{
    console.log(selectItem)
    
    // console.log(selectItem)
    let obj = {
      fatherId:modalType == 1 ? (selectLevel == 1 ? '': selectItem.id) : '',
      level:selectLevel,
      icon:iconName,
      name,
      id:selectItem.id,
    }

    if(selectLevel == 1 && !iconName){
      modalToastRef.current.show("请选择图标", {
        type: "defult",
        placement: "top"
      });
      return
    }

    if(!name){
      modalToastRef.current.show("请输入分类名称", {
        type: "defult",
        placement: "top"
      });
      return
    }

    console.log(obj)
    console.log(modalType)

    if(modalType == 1){
      classifyAdd(obj).then(res=>{
        loadClassify()
        setModalVisible(false)
        setInputName('')
        setIconUrl(0)
        setIconName('')
      })
    }else{

      classifEdit(obj).then(res=>{
        loadClassify()
        setModalVisible(false)
        setInputName('')
        setIconName('')
      })

    }


    
  }


  const editClassify = ()=>{
    setModalType(2)
    setModalVisible(true)
    onClose()
    setInputName(selectItem.name)
    const url = ImageMap.find((image) => {
      return image.name === selectItem.icon;
    })?.url;
    findIconUrl(selectItem.icon,url)
  }

  const [inputName,setInputName] = useState('')
  const [state,setState] = useState('')
  const [iconUrl,setIconUrl] = useState(0)
  const [iconName,setIconName] = useState('')
  const findIconUrl = (name,index)=>{
    setIconUrl(index) 
    setIconName(name)
  }


  const addClassify = (type:any)=>{
    setIconName('')
    setSelectLevel(type)
    setModalType(1)
    setModalVisible(true)
  }


  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();


  const openActionsheet = (type:number,item:any)=>{
    setSelectLevel(type)
    setSelectItem(item)
    onOpen()
  }

  const AlertDialogScreen = () => {
    // const [alertIsOpen, setAlertIsOpen] = React.useState(alertOpen);
  
    const onClose = () => setAlertOpen(false);
  
    const cancelRef = React.useRef(null);
    // return <Center>
    //     {/* <Button colorScheme="danger" onPress={() => setIsOpen(!isOpen)}>
    //       Delete Customer
    //     </Button> */}
    //     <AlertDialog leastDestructiveRef={cancelRef} isOpen={alertOpen} onClose={onClose}>
    //       <AlertDialog.Content>
    //         <AlertDialog.CloseButton />
    //         <AlertDialog.Header>删除分类</AlertDialog.Header>
    //         <AlertDialog.Body>
    //           确定删除该分类吗？
    //         </AlertDialog.Body>
    //         <AlertDialog.Footer>
    //           <Button.Group space={2}>
    //             <Button variant="unstyled" colorScheme="coolGray" onPress={onClose} ref={cancelRef}>
    //               取消
    //             </Button>
    //             <Button colorScheme="danger" onPress={()=>{
    //               delClassIfy(2)
    //               onClose()
    //             }}>
    //               确认
    //             </Button>
    //           </Button.Group>
    //         </AlertDialog.Footer>
    //       </AlertDialog.Content>
    //     </AlertDialog>
    //   </Center>;
    return (
      <Modal
          isOpen={alertOpen}
          onClose={()=>{onClose()}}
          
        >
          <View style={[styles3.centeredView2]}>
            <View style={styles3.modalView}>
              <View style={styles3.topBox}>
                <Text style={[styles3.topBoxTitle,{paddingTop:0,paddingBottom:20}]}>提示</Text>
                <Text style={{textAlign:'center',paddingBottom:20,paddingHorizontal:20,fontSize:15,color:'#666',fontFamily:'HarmonyOS Sans SC'}}>{ delType == 1 ? '归档后该分类将被隐藏，之前的数据仍保留并且可以核算和分析中查看，是否继续?' : '删除该分类后，改分类下的所有数据将会清除，是否继续?'}</Text>
              </View>
  
              
              <View style={styles3.bottomBtns}>
                <TouchableOpacity
                  style={[styles3.bottomBtnItem, styles3.bottomBtnItem2]}
                  onPress={() => {
                    onClose()
                    
                  }}
                >
                  <Text style={[styles3.textStyle, { color: 'rgba(0,0,0,.64)' }]}>取消</Text>
  
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles3.bottomBtnItem}
                  onPress={() => {
                    delClassIfy(2)
                    onClose()
                  }}
                >
                  <Text style={styles3.textStyle}>确认</Text>
  
                </TouchableOpacity>
              </View>
  
  
  
            </View>
          </View>
        </Modal>
    )


    };
  


  const ActionList = ({navigation}:any) =>{
    const toast = useToast();
    
    return (
      <Actionsheet isOpen={isOpen} onClose={onClose}>
          <Actionsheet.Content>
            <Actionsheet.Item style={styles.actionItem} onPress={()=>{
              editClassify()
            }}>
              <Text style={styles.actionItemText}>编辑</Text>
            </Actionsheet.Item>

            {
              (selectLevel == 1 || selectLevel == 2)&&!!(selectItem &&selectItem.children && selectItem.children.length)
              &&
              <Actionsheet.Item style={styles.actionItem} onPress={()=>{
                onClose()
                if(selectItem && selectItem.children.length){
                  navigation.navigate('Subsetsorting',{selectItem,loadClassify,selectLevel})
                }else{
                  // toast.show({
                  //   description: "该分类暂无子分类",
                  //   placement: "top"
                  // })
                  showToast("", "", "该分类暂无子分类");
                }
              }}>
                <Text style={styles.actionItemText}>[{selectItem.name}] 的子分类排序</Text>
              </Actionsheet.Item>
            }


            <Actionsheet.Item style={[styles.actionItem]} onPress={()=>{
              delClassIfy(1)
            }}>
              <Text style={[styles.actionItemText,{color:'rgba(227, 73, 73, 1)'}]}>归档</Text>
            </Actionsheet.Item>
            <Actionsheet.Item style={[styles.actionItem]} onPress={()=>{
              delClassIfy(3)
            }}>
              <Text style={[styles.actionItemText,{color:'rgba(227, 73, 73, 1)'}]}>删除</Text>
            </Actionsheet.Item>
            <Actionsheet.Item style={[styles.actionItem,{borderColor:'rgba(243, 244, 246, 1)',borderTopWidth:10,}]} onPress={()=>{
              onClose()
            }}>
              <Text style={styles.actionItemText}>取消</Text>
            </Actionsheet.Item>
            
          </Actionsheet.Content>
      </Actionsheet>
    )
  }


  


  


  const ModalScrren = ({navigation,storageName,modalType}:any)=>{
    const toast = useToast();
    const modalToastRef = React.useRef();

    const [name ,setName] = useState(storageName || '')
    const onChangeName = (text:string)=>{
      setName(text)
    }

    
    
    
    return(
      <Modal
        isOpen={modalVisible}
        onClose={()=>{setModalVisible(false)}}
        
      >
        <Toast offsetTop={50} ref={modalToastRef} />
        <View style={styles2.centeredView2}>
          <View style={styles2.modalView}>
            <View style={styles2.topBox}>
              <Text style={styles2.topBoxTitle}>{modalType == 1 ? '新建分类' : '编辑分类'}</Text>
              <View style={styles2.inputBox}>
                <TouchableOpacity
                  onPress={()=>{
                    navigation.navigate("IconList",{findIconUrl,setInputName,name,iconUrl,iconName,setState})
                    // setTimeout(()=>{
                    //   setName('12312312')
                    // },1000)
                    // setModalVisible(!modalVisible);
                  }}
                >
                  {
                    selectLevel == 1 
                    ?
                    <View style={{marginRight:16,alignItems:'center',justifyContent:'center',width:36,height:36,borderRadius:100,backgroundColor:'#E7E7E7'}}>
                      <Image style={{ width:20,height:20}} source={
                        iconUrl ? iconUrl : require("../../assets/images/icon_box.png")
                      } alt="" />
                      
                    </View>
                    :
                    ''
                  }

                </TouchableOpacity>
                                
                <TextInput
                  style={styles2.input}
                  placeholder='请输入'
                  placeholderTextColor='#D1D1D6'
                  onChangeText={text => onChangeName(text)}
                  defaultValue={name}
                  maxLength={16}
                />
              </View>
            </View>

            
            <View style={styles2.bottomBtns}>
              <TouchableOpacity
                style={[styles2.bottomBtnItem, styles2.bottomBtnItem2]}
                onPress={() => {
                  setModalVisible(!modalVisible);
                  setInputName('')
                  setIconUrl(0)
                }}
              >
                <Text style={[styles2.textStyle, { color: 'rgba(0,0,0,.64)' }]}>取消</Text>

              </TouchableOpacity>
              <TouchableOpacity
                style={styles2.bottomBtnItem}
                onPress={() => {
                  // setModalVisible(!modalVisible);
                  subMitFrom(name,toast,modalToastRef)
                  
                  // navigation.navigate('Login')
                }}
              >
                <Text style={styles2.textStyle}>确认</Text>

              </TouchableOpacity>
            </View>



          </View>
        </View>
      </Modal>

    )
  }
  

  

  // let gdtwz = 0
  // let isChildScroll = false


  // const [isExpanded, setIsExpanded] = useState(false);

    // const toggleExpandCollapse = (id:string) => {
    //   setTimeout(()=>{
    //     // flatListRef.current.scrollToOffset({ offset: 10000, animated: true });
    //   },500)
    //   // Alert.alert(id)
    //   // 使用 LayoutAnimation 实现动画效果

    //   LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    //   let arr = JSON.parse(JSON.stringify(categoryList))
    //   arr.forEach((accordion:any) => {
    //     accordion.isExpanded = id === accordion.id ? !accordion.isExpanded : false
    //   });
      
    
    //   setCategoryList((arr));
    // }; 
  useEffect(() => {
    loadClassify()
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      // 处理返回操作，可以在这里执行你的逻辑
      // 如果返回 true，表示消费了该事件，不会继续传递给其他组件
      // 如果返回 false，表示未消费该事件，会继续传递给其他组件或默认行为
      // 你可以根据需求来判断是否消费该事件
      // Alert.alert('123')
      setModalVisible(false);
      navigation.goBack()
      return true; // 返回 true，表示已处理该事件
    });

  }, []);


  async function loadClassify() {
    getEventList().then(res=>{
      setCategoryList(res.data || [])
      loadCategory()
      loadCommonCategory()
    })


  
    
  }

  const renderItem2 = ({ item, drag, isActive,preData }: RenderItemParams<Item>) => {
    return(
      <View style={styles.item3} key={item.id}>
        <View style={styles.item3Box_left}>
          
          <TouchableOpacity
            onPress={()=>{
              openActionsheet(3,item)
            }}
          >
            <View style={styles.item3Box_left_title}>
              <View style={styles.item2Box_letf_titleLeft}>
                <Text style={styles.item2Box_left_text}>{item.name}</Text>
                {/* <TouchableOpacity onPress={()=>{}}> */}
                  <ThreeDotsIcon size={3.5} color='#AEAEB2' />
                {/* </TouchableOpacity> */}
              </View>
            </View>
          </TouchableOpacity>
        </View>
        <View>
        </View>
     </View>
    )
  }



  const renderItem1 = ({ item, drag, isActive,preData }: RenderItemParams<Item>) => {
   
    const item2  = item
    return (
     <View style={styles.item2Box} key={item.id}>
      <View style={styles.item2Box_left}>
        
            <TouchableOpacity
              onPress={()=>{
                openActionsheet(2,item)
              }}
            >
              <View style={styles.item2Box_left_title}>
                <View style={styles.item2Box_letf_titleLeft}>
                  <Text style={styles.item2Box_left_text}>{item.name}</Text>
                  <ThreeDotsIcon size={3.5} color='#AEAEB2' />
                </View>
              </View>
            </TouchableOpacity>

          
        
      </View>
      <View style={styles.item3Box} >

        {
          item.children.map((item)=>{
            return renderItem2({item})
          })
        }
        <TouchableOpacity onPress={()=>{
            addClassify(3)
            setSelectItem(item)
          }}>
          <View style={styles.item3_add}>
            <AddIcon color='#aaa' size="3.5" />
          </View>
        </TouchableOpacity>
      </View>
    <View>

     

      
        
        
      </View>
     </View>
    );
  };
  

  const renderItem = ({ item, drag, isActive }: RenderItemParams<Item>) => {
    const [isExpanded, setIsExpanded] = useState(false);

    const toggleExpandCollapse = (id:string) => {
    //   setTimeout(()=>{
    //     // flatListRef.current.scrollToOffset({ offset: 10000, animated: true });
    //   },500)
      // Alert.alert(id)
      // 使用 LayoutAnimation 实现动画效果

      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
      // let arr = JSON.parse(JSON.stringify(categoryList))
      // arr.forEach((accordion:any) => {
      //   accordion.isExpanded = id === accordion.id ? !accordion.isExpanded : false
      // });
      setIsExpanded((pre)=>!pre)
      
    
      // setCategoryList((arr));
    }; 

    
    const url = ImageMap.find((image) => {
      return image.name === item.icon;
    })?.url;

    const item2 = item
    return (
     <View style={styles.item1} 
      
    //  {...panResponder.panHandlers}
     >
      <ShadowDecorator color="#000">
      <View style={styles.listTitle}>
        
          <TouchableOpacity
            onPressIn={drag}
            disabled={isActive}
          >
            {/* <HamburgerIcon style={{width:40,height:28,}} color='#AEAEB2' /> */}
            <View style={{width:24,flex:1,alignItems:'center',justifyContent:'center'}}>
              <Image style={{ width:24,height:24}} source={require("../../assets/images/arrow-list.png")} alt="" />
            </View>
          </TouchableOpacity>
        
        <View style={styles.titleRight}>
          <View style={styles.titleRight_left}>
            <View style={{backgroundColor:'#fff',width:36,height:36,borderRadius:100,alignItems:'center',justifyContent:'center',marginRight:8}}>
              <Image style={{width:25,height:25,}} source={url} alt="" />
            </View>
            <View style={{flex:1}}>
              <Text numberOfLines={1} ellipsizeMode="tail" style={styles.title1_text}>{item.name}</Text>
              <Text style={styles.title1_desc}>{item.children.length||0}个子分类</Text>
            </View>
          </View>
          <View style={styles.titleRight_right}>
            {/* <TouchableOpacity 
              onPress={()=>{

              }}
              style={[styles.titleBtn,]}>
              <Text style={[styles.titleBtnText,{color:'#4371B1'}]}>编辑</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              onPress={()=>{

              }}
              style={[styles.titleBtn]}>
              <Text style={[styles.titleBtnText,{color:'#D43030'}]}>归档</Text>
            </TouchableOpacity> */}

            <TouchableOpacity 
              onPress={()=>{
                openActionsheet(1,item)
              }}
              style={[styles.titleBtn]}>
              <ThreeDotsIcon size={3} color='#AEAEB2' />
            </TouchableOpacity>
            <TouchableOpacity 
              onPress={()=>{toggleExpandCollapse(item.id)}}
              style={styles.titleStatus}>
              <View style={ isExpanded ? {transform: [{ rotate: '0deg' }]} :{transform: [{ rotate: '270deg' }]}}>
                <Icon name="caret-down" size={15} color="#rgba(0, 0, 0, 0.64)" />
              </View>
            </TouchableOpacity>
          </View>
        </View>
        
      </View>
      </ShadowDecorator>
      
      
       
        {
          isExpanded
          ?
          <View>
            {
              item.children.map((item)=>{
                return renderItem1({item})
              })
            }
            <TouchableOpacity onPress={()=>{
              addClassify(2)
              setSelectItem(item)
            }} style={styles.item1_bottomBtn}>
              <AddIcon color='#4371B1' size="3.5" />
              <Text style={styles.item1_bottomBtnText}>添加子分类</Text>
            </TouchableOpacity>
          </View>
          :
          ''
        }
     </View>
    );
  };


  return (
    // <View>
      <NativeBaseProvider>
      <S.GrayContainer style={{backgroundColor:'#fff',padding:0,}}>
      
        <View style={{paddingHorizontal:0,paddingBottom:40, height:'100%'}}>
          <Title navigation={navigation} addBtn={addClassify}/>
          <DraggableFlatList
            style={{paddingHorizontal:16}}
            ref={flatListRef}
            showsVerticalScrollIndicator={false}
            data={categoryList}
            onDragEnd={({ data }) => {
              setCategoryList(data)
              let obj = {
                level:1,
                ids:data.map(item=>item.id)
              }
              console.log(obj)
              eventSort(obj).then(res=>{
                loadCategory()
              })
            }}
            keyExtractor={(item) => item.id}
            renderItem={renderItem}
          />
          
        </View>
        
      
      
    </S.GrayContainer>
    <ActionList navigation={navigation}/>
    <ModalScrren storageName={inputName} modalType={modalType} navigation={navigation}/>
    <AlertDialogScreen/>
    </NativeBaseProvider>
    // </View>
    
  );
}


export default Classify

const styles = StyleSheet.create({
  titleBox:{
    width:'100%',
    position:'relative',
    alignItems:'center',
    height:40,
    justifyContent:"center",
    marginBottom:16,
    // paddingHorizontal:16,
  },
  backBtn:{
    position:'absolute',
    left:16,
    backgroundColor:'#fff',
    width:40,
    height:40,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:100,
    
    shadowColor: Platform.OS === 'android' ? '' : 'rgba(0, 0, 0, 0.08)', // 阴影颜色
    shadowOffset: { width: 0, height: 2 }, // 阴影偏移
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 8, // 阴影半径
    elevation: 3, // 阴影深度
  },
  backBtnRight:{
    
    position:'absolute',
    right:16,
    backgroundColor:'#fff',
    width:40,
    height:40,
    display:'flex',
    alignItems:'center',
    justifyContent:'center',
    borderRadius:100,
    
    shadowColor: Platform.OS === 'android' ? '' : 'rgba(0, 0, 0, 0.08)', // 阴影颜色
    shadowOffset: { width: 0, height: 2 }, // 阴影偏移
    shadowOpacity: 1, // 阴影不透明度
    shadowRadius: 8, // 阴影半径
    elevation: 3, // 阴影深度
  },
  titlText:{
    fontSize:17,
    fontWeight:'600',
    color:'#000000'
  },
  item1:{
    // paddingVertical:12,
    backgroundColor:'#F5F5F5',
    marginBottom:16,
    borderRadius:16,
    // paddingHorizontal:16,
  },
  listTitle:{
    paddingVertical:12,
    paddingHorizontal:12,
    flexDirection:'row',
    alignItems:'center',
    backgroundColor:'#F5F5F5',
    borderRadius:16,

  },
  titleRight:{
    flex:1,
    marginLeft:8,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between'
  },
  titleRight_left:{
    flexDirection:'row',
    alignItems:'center',
    flex:1,
  },
  title1_text:{
    // flex: 1,
    width:"100%",
    fontFamily:'HarmonyOS Sans SC',
    fontSize:16,
    color:'#1C1C1E',
    fontWeight:'700',
    lineHeight:24,
  },
  title1_desc:{
    fontFamily:'HarmonyOS Sans SC',
    color:'#AEAEB2',
    fontSize:12,
  },
  titleRight_right:{
    flexDirection:'row',
    alignItems:'center'
  },
  titleBtn:{
    marginRight:8,
    height:24,
    width:24,
    // paddingHorizontal:12,
    backgroundColor:'#E8E8E8',
    borderRadius:100,
    justifyContent:'center',
    alignItems:'center'
  },
  titleStatus:{
    width:24,
    height:24,
    borderRadius:100,
    // backgroundColor:'#E8E8E8',
    alignItems:'center',
    justifyContent:'center',
    marginLeft:8,
  },
  titleBtnText:{
    fontSize:12
  },
  item1_bottomBtn:{
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',
    paddingVertical:11,
    borderTopWidth:1,
    borderColor:'#fff',
  },
  item1_bottomBtnText:{
    fontFamily:'HarmonyOS Sans SC',
    color:'#4371B1',
    fontSize:14,
    fontWeight:'500',
    marginLeft:5,
  },
  item2Box:{
    flexDirection:'row',
    borderTopWidth:1,
    borderColor:'#fff',
    alignItems:'center',
    width:'100%'
    // padding:12,
  },
  item2Box_left:{
    // height:'100%',
    width:'50%',
    
    justifyContent:'center',
    alignItems:'center',
  },
  item2Box_left_title:{
    marginVertical:16,
    flexDirection:'row',
    alignItems:'center',
    backgroundColor:'#EAEAEA',
    width:"70%",
    paddingVertical:6,
    paddingHorizontal:8,
    borderRadius:8,
    flexShrink:0,
  },
  
  item2Box_letf_titleLeft:{
    // flex:1,
    // marginLeft:8,
    width:'100%',
    flexShrink:0,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  item2Box_left_text:{
    flex:1,
    marginRight:5,
    color:'#48484A',
    fontSize:14
  },
  item3Box_left:{
    width:"100%",
  },
  item3Box_left_title:{
    flexDirection:'row',
    alignItems:'center',
    backgroundColor:'#EAEAEA',
    width:'100%',
    paddingVertical:6,
    paddingHorizontal:8,
    borderRadius:8,
    flexShrink:0,
  },
  item3Box:{
    width:'50%',
    borderLeftWidth:1,
    borderColor:'#fff',
    // alignItems:'center',
    padding:12,
    justifyContent:'center',
  },
  item3:{
    marginBottom:12,
    width:'100%'
  },
  item3_add:{
    width:65,
    height:32,
    borderRadius:8,
    backgroundColor:'#EAEAEA',
    alignItems:'center',
    justifyContent:'center'
  },
  actionItem:{
    // textAlign:'center',
    // backgroundColor:'red',
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',
    borderBottomWidth:1,
    borderColor:'#eee'
    
    
    // color:'rgba(48, 49, 51, 1)'
  },
  actionItemText:{
    fontSize:16,
    color:'rgba(48, 49, 51, 1)'
  },
});
const styles2 = StyleSheet.create({
  centeredView2: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: 'rgba(0,0,0,.6)',
    padding: 20,
  },
  modalView: {
    // margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    overflow: "hidden",
    alignItems: "center",
    shadowColor: "#000",
    justifyContent: 'center',
    width: '100%'
    // width:290)
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  },
  bottomBtns: {
    flexDirection: 'row',
    width: "100%",
  },
  bottomBtnItem: {
    width: '50%',
    alignItems: 'center',
    justifyContent: 'center',
    // height: 48,
    // backgroundColor:'red',
    borderTopWidth: 1,
    borderColor: 'rgba(0,0,0,.1)',
    borderStyle: 'solid',
    paddingVertical:16,
  },
  bottomBtnItem2: {
    borderRightWidth: 1,
    borderColor: 'rgba(0,0,0,.1)',
    borderStyle: 'solid'
  },
  textStyle: {
    fontSize: 16,
    color: '#4371B1',
  },
  topBox: {
    padding: 16,
    paddingTop:22,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    // backgroundColor:'red'
  },
  topBoxTitle: {
    color: '#4371B1',
    fontSize: 18,
    fontWeight: '500',
    justifyContent: 'center',
    alignContent: 'center'
  },
  tags: {
    width: '100%',
    textAlign: 'left',
    backgroundColor: '#F5F5F5',
    marginTop: 12,
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
    overflow: 'hidden',
    fontSize: 14,
    color: '#000000',
    marginBottom: 12,
  },
  inputBox: {
    flexDirection: 'row',
    width: '100%',
    alignItems:'center',
    marginTop:16,
    marginBottom:32,
  },
  inputItem: {
    width: "50%",

  },
  inputText: {
    fontSize: 12,
    color: '#000000',
    marginBottom: 4,

  },
  input: {
    // width: 110,
    flex:1,
    height: 40,
    borderColor: 'rgba(0,0,0,.2)',
    borderWidth: 1,
    borderRadius: 4,
    paddingHorizontal: 10,
    color:'#000'
  },
});
const styles3 = StyleSheet.create({
  centeredView2: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: 'rgba(0,0,0,.6)',
    padding: 30,
  },
  modalView: {
    // margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    overflow: "hidden",
    alignItems: "center",
    shadowColor: "#000",
    justifyContent: 'center',
    width: '100%'
    // width:290)
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  },
  bottomBtns: {
    flexDirection: 'row',
    width: "100%",
  },
  bottomBtnItem: {
    width: '50%',
    alignItems: 'center',
    justifyContent: 'center',
    // height: 48,
    // backgroundColor:'red',
    borderTopWidth: 1,
    borderColor: 'rgba(0,0,0,.1)',
    borderStyle: 'solid',
    paddingVertical:16,
  },
  bottomBtnItem2: {
    borderRightWidth: 1,
    borderColor: 'rgba(0,0,0,.1)',
    borderStyle: 'solid'
  },
  textStyle: {
    fontSize: 16,
    color: '#4371B1',
  },
  topBox: {
    padding: 14,
    paddingTop:22,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    // backgroundColor:'red'
  },
  topBoxTitle: {
    color: '#4371B1',
    fontSize: 18,
    fontWeight: '500',
    justifyContent: 'center',
    alignContent: 'center'
  },
  tags: {
    width: '100%',
    textAlign: 'left',
    backgroundColor: '#F5F5F5',
    marginTop: 12,
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
    overflow: 'hidden',
    fontSize: 14,
    color: '#000000',
    marginBottom: 12,
  },
  inputBox: {
    flexDirection: 'row',
    width: '100%',
    alignItems:'center',
    marginTop:16,
    marginBottom:32,
  },
  inputItem: {
    width: "50%",

  },
  inputText: {
    fontSize: 12,
    color: '#000000',
    marginBottom: 4,

  },
  input: {
    // width: 110,
    flex:1,
    height: 40,
    borderColor: 'rgba(0,0,0,.2)',
    borderWidth: 1,
    borderRadius: 4,
    paddingHorizontal: 10,
  },
});